<template>
    <!-- 导航部分 -->
    <el-row>
        <el-col :span="24">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>项目管理</el-breadcrumb-item>
                <el-breadcrumb-item>所有项目列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
    <!-- 搜索栏 -->
    <el-row style="margin-top: 10px">
        <el-col :span="24">
            <el-form :model="projectQuery" inline>
                <el-form-item label="项目名称">
                    <el-input v-model="projectQuery.projectName" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select placeholder="全部" style="width:100px" v-model="projectQuery.projectStatus">
                        <el-option label="全部" :value="0" />
                        <el-option label="草稿" :value="1" />
                        <el-option label="发布" :value="2" />
                        <el-option label="归档" :value="3" />
                        <el-option label="暂停" :value="4" />
                        <el-option label="意外" :value="5" />
                        <el-option label="删除" :value="99" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker v-model="startTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="endTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="loadProjects">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <!-- 工具栏 -->
    <el-row style="margin-top: 10px">
        <el-col :span="24">
            <el-button-group>
                <el-button type="primary" @click="toAdd">新增</el-button>
                <el-button type="primary">编辑</el-button>
                <el-button type="primary" @click="toDeletes">删除</el-button>
                <el-button type="primary" @click="toArchiving">归档</el-button>
                <el-button type="primary" @click="doPublish">发布</el-button>
            </el-button-group>
        </el-col>
    </el-row>
    <!-- 数据表 -->
    <el-row style="margin-top: 10px">
        <el-col :span="24">
            <el-table :data="projects" border :stripe="true" ref="projectTable">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="projectId" label="#">
                    <template #default="scope">
                        <el-link type="success" @click="showProjectDetails(scope.row.projectId)">
                            {{ scope.row.projectId }}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="projectName" label="项目名称" />
                <el-table-column prop="projectDesc" label="项目描述" />
                <el-table-column prop="user.userName" label="管理者" />
                <el-table-column prop="startTime" label="开始时间" />
                <el-table-column prop="endTime" label="结束时间" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="modifyTime" label="修改时间" />
                <el-table-column prop="taskCount" label="任务数量" />
                <el-table-column prop="projectStatus" label="状态">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.projectStatus == 1">草稿</el-tag>
                        <el-tag type="info" v-else-if="scope.row.projectStatus == 2">发布</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.projectStatus == 3">归档</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.projectStatus == 4">暂停</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.projectStatus == 5">意外</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.projectStatus == 99">删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="330">
                    <template #default="scope">
                        <el-button-group>
                            <template v-if="scope.row.user.userId == curUserId">
                                <el-button size="small" type="primary"
                                    @click="doEdit(scope.row.projectId)">编辑</el-button>

                                <el-popconfirm width="200" confirm-button-text="必须归档" cancel-button-text="点错了"
                                    @confirm="fileProjectById(scope.row.projectId)" title="您确定要归档这条数据吗？">
                                    <template #reference>
                                        <el-button size="small" type="warning">归档</el-button>
                                    </template>
                                </el-popconfirm>

                                <el-popconfirm width="200" confirm-button-text="必须删" cancel-button-text="点错了"
                                    @confirm="deleteProjectById(scope.row.projectId)" title="您确定要删除这条数据吗？">
                                    <template #reference>
                                        <el-button size="small" type="danger">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                            <el-button @click="showTaskList(scope.row)" size="small" type="primary">任务</el-button>
                            <el-button size="small" type="primary">日历</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <!-- 分页栏 -->
    <el-row style="margin-top: 10px">
        <!-- 监听页码的变化事件 -->
        <el-pagination @change="changePage" :total="total" background layout="prev, pager, next" />
    </el-row>
    <!-- 新增弹窗的结构代码 -->
    <el-dialog v-model="projectAddWinDialogVisible" title="新增项目信息" width="500">
        <el-form :model="addProject" label-width="auto">
            <el-form-item label="项目编号">
                <el-input v-model="addProject.projectId" />
            </el-form-item>
            <el-form-item label="项目名称">
                <el-input v-model="addProject.projectName" />
            </el-form-item>
            <el-form-item label="项目描述">
                <!--                    <el-input type="textarea" v-model="newProject.projectDesc"/>-->
                <!-- 富文本编辑器的结构 -->
                <div style="border: 1px solid #ccc">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                        :mode="mode" />
                    <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
                        :mode="mode" @onCreated="handleCreated" />
                </div>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker v-model="addProject.startTime" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
                    clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker v-model="addProject.endTime" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"
                    clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="addProject.projectStatus">
                    <el-radio :value="1" label="草稿" />
                    <el-radio :value="2" label="发布" />
                    <el-radio :value="3" label="归档" />
                    <el-radio :value="4" label="暂停" />
                    <el-radio :value="5" label="意外" />
                    <el-radio :value="99" label="删除" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="用户ID">
                <el-tag>{{ curUserName }}</el-tag>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addSubmit">提交</el-button>
                <el-button type="info" @click="cancelAdd">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 项目详情弹窗 -->
    <el-dialog v-model="projectDetailDialogVisible" title="项目详情" width="50%" @close="closeDetailDialog">
        <el-form :model="projectDetails" label-width="120px">
            <el-form-item label="项目名称">
                <el-input v-model="projectDetails.projectName" disabled />
            </el-form-item>
            <el-form-item label="项目描述">
                <div style="border: 1px solid #ccc; height: 200px; overflow-y: auto;">
                    <pre>{{ projectDetails.projectDesc }}</pre>
                </div>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-input v-model="projectDetails.startTime" disabled />
            </el-form-item>
            <el-form-item label="结束时间">
                <el-input v-model="projectDetails.endTime" disabled />
            </el-form-item>
            <el-form-item label="任务列表">
                <el-table :data="tasks" border stripe row-key="taskId" lazy :load="loadChildrenTask"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" ref="taskTable">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="taskId" label="#">
                    <template #default="scope">
                        <el-link @click="showDetail(scope.row)" type="success">
                            {{ scope.row.taskId }}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="taskTitle" label="任务标题" />
                <el-table-column prop="user.userName" label="负责人" />
                <el-table-column label="任务工期" prop="taskDuration" />
                <el-table-column prop="startTime" label="开始时间" />
                <el-table-column prop="endTime" label="结束时间" />
                <el-table-column prop="taskStatus" label="项目状态">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.taskStatus == 1">正常</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.taskStatus == 2">暂停</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column label="操作" width="330">
                    <template #default="scope">
                        <el-link @click="toAddSubTask(scope.row)" :disabled="curUserId != project.userId"
                            style="margin: 0px 5px" type="primary"><el-icon>
                                <Plus />
                            </el-icon>新增</el-link>
                        <el-link @click="toEditTask(scope.row)" :disabled="curUserId != project.userId"
                            style="margin: 0px 5px" type="primary"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-link>
                        <el-link @click="deleteTask(scope.row)" :disabled="curUserId != project.userId"
                            style="margin: 0px 5px" type="primary"><el-icon>
                                <Delete />
                            </el-icon>删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 编辑弹窗的结构代码 -->
    <el-dialog v-model="projectEditWinDialogVisible" title="编辑项目信息" width="500">
        <el-form :model="editProject" label-width="auto">
            <el-form-item label="项目编号" prop="projectId">
                <el-input v-model="editProject.projectId" readonly></el-input>
            </el-form-item>
            <el-form-item label="项目名称">
                <el-input v-model="editProject.projectName" />
            </el-form-item>
            <el-form-item label="项目描述">
                <el-input v-model="editProject.projectDesc" />
            </el-form-item>
            <el-form-item label="状态" prop="projectStatus">
                <el-radio-group v-model="editProject.projectStatus">
                    <el-radio :value="1" label="草稿" />
                    <el-radio :value="2" label="发布" />
                    <el-radio :value="3" label="归档" />
                    <el-radio :value="4" label="暂停" />
                    <el-radio :value="5" label="意外" />
                    <el-radio :value="99" label="删除" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="管理者">
                <el-input v-model="editProject.userId" readonly></el-input>
            </el-form-item>
            <el-form-item label="发布时间">
                <el-input v-model="editProject.createTime" readonly></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker v-model="editProject.startTime" placeholder="选择日期时间"
                    value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker v-model="editProject.endTime" placeholder="选择日期时间"
                    value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="editSubmit">提交</el-button>
                <el-button type="info" @click="cancelEdit">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
     <!-- 显示任务表 -->
     
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 导入axios
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ElMessageBox } from 'element-plus'
// 封装查询条件
let projectQuery = ref({});
// 封装当前的页面
let pageNum = ref(1);
// 封装查询的结果集合
let projects = ref([])
// 封装查询的数据总条数
let total = ref(0);
let router = useRouter();
// 封装编辑的用户信息
let addProject = ref({});
// 封装所有的角色列表
let users = ref([]);
let startTime = ref([]);
let endTime = ref([]);
let curUserId = ref();
let curUserName = ref();
// 新增项目的弹窗标记
let projectAddWinDialogVisible = ref(false);
// 控制项目详情对话框的显示/隐藏
let projectDetailDialogVisible = ref(false);
// 弹窗标记
let projectEditWinDialogVisible = ref(false);

let tasks = ref([]);
let taskRequest = ref({});
let project = ref({});

let projectTable = ref(null);
// 用于存储当前显示详情的项目
let projectDetails = ref({})
let editProject = ref({});
// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML ，如果我们修改了内容，这里会跟着变化
const valueHtml = ref('<p>hello</p>')
// 工具栏配置
const toolbarConfig = {
}
const editorConfig = { placeholder: '请输入内容...' }


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}


/**
 * 加载子任务列表
 * @param task 当前这一行数据对象
 * @param node  树节点
 * @resole 函数，用来将我们的数据加入到列表中
 */
 function loadChildrenTask(task, node, resole) {
    // 加载数据
    taskRequest.loadTaskByProjectId(taskQuery, project.value.projectId, task.taskId, res => {
        // 调用resole函数将查询的结果加入列表
        resole(res.data);
    })
}


/**
 * 加载任务列表
 * @param parentId 父任务编号
 */
 function loadTasks(parentId) {
// 通过API加载任务列表
axios.get("http://localhost:8080/task/list?projectId=" + project.value.projectId + "&parentId=" + parentId)
                // then是一个函数，这个函数的参数也是一个函数
                .then(res=>{
                    tasks.value = res.data.data;
                })
}

/**
 * 新增按钮的事件
 */
function toAdd() {
    projectAddWinDialogVisible.value = true;
}
/**
 * 取消编辑
 */
function cancelAdd() {
    console.log(addProject.value);
    addProject.value = {};
    projectAddWinDialogVisible.value = false;
}

/**
 * 进入任务列表
 * @param project
 */
 function showTaskList(project){
    router.push("/home/tasks/" + project.projectId)
}

/**
 * 编辑窗体提交按钮事件
 */
function addSubmit() {
    // 可以做一些简单的校验
    // 我们只需提交addProject这个对象数据即可
    let url = "http://localhost:8080/project/add";

    addProject.value.userId = curUserId.value;
    axios.post(url, addProject.value)
        .then(res => {
            if (res.data.code == 200) {
                ElMessage({
                    type: "success",
                    message: "编辑成功"
                });

                // 关闭窗体
                cancelAdd();
                // 刷新表格
                loadProjects();
            } else if (res.data.code == 300) {
                ElMessage({
                    type: "warning",
                    message: "用户名重复"
                });
            } else {
                ElMessage({
                    type: "error",
                    message: "编辑失败"
                });
            }
        })
        .catch(error => {
            ElMessage({
                type: "error",
                message: `编辑失败: ${error.message}`
            });
        });
}

/**
 * 分页栏的页码变化事件
 * @param value 最新的页码
 */
function changePage(value) {
    pageNum.value = value; // 修改页码数据
    // 重新加载数据
    loadProjects();
}
/**
 * 加载项目列表
 */
function loadProjects() {
    if (startTime.value[0]) {
        projectQuery.value.startTimeLeft = startTime.value[0];
    }
    if (startTime.value[1]) {
        projectQuery.value.startTimeRight = startTime.value[1];
    }
    if (endTime.value[0]) {
        projectQuery.value.endTimeLeft = endTime.value[0];
    }
    if (endTime.value[1]) {
        projectQuery.value.endTimeRight = endTime.value[1];
    }
    // 构建url  get请求参数在url后面
    let url = "http://localhost:8080/project/list?page="
        + pageNum.value + "&limit=" + 10;
    console.log(projectQuery)
    if (projectQuery.value.projectName) {// 判断projectName是否存在
        url += "&projectName=" + projectQuery.value.projectName;
    }
    if (projectQuery.value.projectStatus) {// 判断userStatus是否存在
        url += "&projectStatus=" + projectQuery.value.projectStatus;
    }

    if (projectQuery.value.startTimeLeft) {
        url += "&startTimeLeft=" + projectQuery.value.startTimeLeft;
    }
    if (projectQuery.value.startTimeRight) {
        url += "&startTimeRight=" + projectQuery.value.startTimeRight;
    }
    if (projectQuery.value.endTimeLeft) {
        url += "&endTimeLeft=" + projectQuery.value.endTimeLeft;
    }
    if (projectQuery.value.endTimeRight) {
        url += "&endTimeRight=" + projectQuery.value.endTimeRight;
    }
    // 发送请求
    axios.get(url).then((res) => {
        // 这里的response就是我们请求的结果
        console.log(res); // res的结构可以在浏览器控制台查看
        // 取出数据
        let data = res.data.data; // 因为axios会对结果进行一个封装，所以多了一层data。
        //  设置总条数
        total.value = res.data.total;
        // 设置数据列表
        projects.value = data;
    });
}
// 获取项目详情
function getProjectDetails(projectId) {
    let url = "http://localhost:8080/project/projectId?projectId="
        + projectId;
    axios.get(url).then((res) => {
        // 这里的response就是我们请求的结果
        console.log(res); // res的结构可以在浏览器控制台查看
        // 取出数据
        projectDetails.value = res.data.data; // 因为axios会对结果进行一个封装，所以多了一层data。
    });
}

// 在表格的项目编号列中添加点击事件
function showProjectDetails(projectId) {
    getProjectDetails(projectId);
    project.value.projectId = projectId;
    loadTasks(0);
    projectDetailDialogVisible.value = true;
    console.log(projectDetails.value);

}

// 关闭项目详情弹窗时清空项目详情
function closeDetailDialog() {
    projectDetails.value = {};
    projectDetailDialogVisible.value = false;
}


/**
 * 行编辑按钮的单击事件
 * @param projectId
 */
function doEdit(projectId) {
    // 显示弹窗
    projectEditWinDialogVisible.value = true;
    // 加载项目信息
    loadProjectById(projectId);
    // 加载所有的角色信息
    loadProjects();

}


/**
 *  根据项目编号查询要编辑的用户信息
 * @param projectId
 */
function loadProjectById(projectId) {
    // 直接查询
    let url = "http://localhost:8080/project/projectId?projectId=" + projectId;
    axios.get(url).then(res => {
        // 将查询数据赋值给我们要编辑的用户对象
        editProject.value = res.data.data;
    })
}


/**
 * 编辑窗体提交按钮事件
 */
function editSubmit() {
    // 可以做一些简单的校验
    // 我们只需提交editUser这个对象数据即可
    let url = "http://localhost:8080/project/update"
    axios.put(url, editProject.value).then(res => {
        if (res.data.code == 200) {
            ElMessage({
                type: "success",
                message: "编辑成功"
            });
            // 刷新表格
            loadProjects();
            // 关闭窗体
            cancelEdit();
        } else if (res.data.code == 300) {
            ElMessage({
                type: "warning",
                message: "用户名重复"
            });
        } else {
            ElMessage({
                type: "error",
                message: "编辑失败"
            });
        }
    });
}

/**
 * 取消编辑
 */
function cancelEdit() {
    editProject.value = {};
    projectEditWinDialogVisible.value = false;
}

/**
 * 行删除按钮事件
 * @param projectId
 */
function deleteProjectById(projectId) {
    let url = "http://localhost:8080/project/delete?projectId=" + projectId;
    axios.delete(url).then(res => {
        ElMessage({
            type: "info",
            message: "删除完成"
        });
        loadProjects();
    });
}

/**
 * 行归档按钮事件
 * @param projectId
 */
function fileProjectById(projectId) {
    let url = "http://localhost:8080/project/file?projectId=" + projectId;
    axios.put(url).then(res => {
        ElMessage({
            type: "info",
            message: "归档完成"
        });
        loadProjects();
    });
}


/*
* 批量发布按钮事件
*/
function doPublish() {
    let selectedRows = projectTable.value.getSelectionRows();
    if (selectedRows.length === 0) {
        ElMessage({
            type: "warning",
            message: "你没有选中任何数据"
        });
        return;
    }
    ElMessageBox.confirm(
        '您确定要将选中的项目发布吗？',
        '提示',
        {
            confirmButtonText: '是的',
            cancelButtonText: '点错了',
            type: 'warning',
        }
    ).then(() => {
        let noCurUserProjectNames = [];
        let projectIds = [];
        selectedRows.forEach(row => {
            if (row.user.userId != curUserId.value) {
                noCurUserProjectNames.push(row.projectName);
            }
            projectIds.push(row.projectId);
        });

        if (noCurUserProjectNames.length > 0) {
            ElMessage({
                type: "warning",
                message: "您选中的项目中，有以下项目[" + noCurUserProjectNames.join(",") + "]并非您管理的，你没有发布权限"
            });
            return;
        }
        selectedRows.forEach(row => {
            if (row.projectStatus != 2) {
                noCurUserProjectNames.push(row.projectName);
            }
            projectIds.push(row.projectId);
        });
        if (noCurUserProjectNames.length > 0) {
            ElMessage({
                type: "warning",
                message: "您选中的项目中，有以下项目[" + noCurUserProjectNames.join(",") + "]不处于草稿状态，你不能发布"
            });
            return;
        }
        // 使用axios发送请求
        axios.post('http://localhost:8080/project/publish', projectIds, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(res => {
            if (res.status === 200) {
                ElMessage({
                    type: "success",
                    message: "成功发布[" + res.data.data + "]条数据"
                });
                loadProjects();
            } else {
                ElMessage({
                    type: "warning",
                    message: "发布失败"
                });
            }
        })
            .catch(error => {
                ElMessage({
                    type: "error",
                    message: "请求发生错误：" + error.message
                });
            });
    }).catch(() => {
        // 用户取消操作
    });
}


//批量删除

function toDeletes() {
    let selectedRows = projectTable.value.getSelectionRows();
    if (selectedRows.length == 0) {
        ElMessage({
            type: "warning",
            message: "你没有选中任何数据"
        });
        return;
    }
    ElMessageBox.confirm(
        '您确定要删除选中的项目吗？',
        'Warning',
        {
            confirmButtonText: '是的',
            cancelButtonText: '点错了',
            type: 'warning',
        }
    ).then(() => {
        let noCurUserProjectNames = [];
        let projectIds = [];
        selectedRows.forEach(row => {
            if (row.user.userId != curUserId.value) {
                noCurUserProjectNames.push(row.projectName);
            }
            projectIds.push(row.projectId);
        })
        if (noCurUserProjectNames.length > 0) {
            ElMessage({
                type: "warning",
                message: "您选中的项目中，有以下项目[" + noCurUserProjectNames.join(",") + "]并非您管理的，不能删除"
            });
            return;
        }
        axios.delete('http://localhost:8080/project/deletes', {
            data: projectIds, // 请求体放在 data 字段中
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(res => {
                if (res.status == 200) {
                    ElMessage({
                        type: "success",
                        message: "成功删除[" + res.data + "]条数据"
                    })
                    loadProjects();
                } else {
                    ElMessage({
                        type: "warning",
                        message: "删除失败"
                    })
                }
            });
    }).catch(() => { });
}


function toArchiving() {
    let selectedRows = projectTable.value.getSelectionRows();
    if (selectedRows.length == 0) {
        ElMessage({
            type: "warning",
            message: "你没有选中任何数据"
        });
        return;
    }
    ElMessageBox.confirm(
        '您确定要将选中的项目归档吗？',
        '提示',
        {
            confirmButtonText: '是的',
            cancelButtonText: '点错了',
            type: 'warning',
        }
    ).then(() => {

        let noCurUserProjectNames = [];
        let draftProjectName = []
        let projectIds = [];
        selectedRows.forEach(row => {
            if (row.user.userId != curUserId.value) {
                noCurUserProjectNames.push(row.projectName);
            }
            if (row.projectStatus == 1) {
                draftProjectName.push(row.projectName);
            }
            projectIds.push(row.projectId);
        })
        if (noCurUserProjectNames.length > 0) {
            ElMessage({
                type: "warning",
                message: "您选中的项目中，有以下项目[" + noCurUserProjectNames.join(",") + "]并非您管理的，你没有归档权限"
            });
            return;
        }
        if (draftProjectName.length > 0) {
            ElMessage({
                type: "warning",
                message: "您选中的项目中，有以下项目[" + draftProjectName.join(",") + "]属于草稿状态，不能执行归档操作"
            });
            return;
        }
        // 调用API进行归档操作
        axios.put('http://localhost:8080/project/archiving', projectIds, {
            headers: {
                'Content-Type': 'application/json',
            }
        }).then(res => {
            if (res.status == 200) {
                ElMessage({
                    type: "success",
                    message: "成功归档[" + res.data + "]条数据"
                })
                loadProjects();
            } else {
                ElMessage({
                    type: "warning",
                    message: "归档失败"
                })
            }
        });
    }).catch(() => { });
}


// 在声明周期的onmounted函数中调用loadUsers函数
onMounted(() => {
    loadProjects();
    // 从localStorage中获取用户编号
    curUserId.value = localStorage.getItem("userId");
    curUserName.value = localStorage.getItem("userName");
    if (!curUserId.value) {
        // 如果userId不存在，则设置默认值或提示用户登录
        // 例如设置默认值为1：
        curUserId.value = '1';
        // 或者进入登录页面
        // router.push("/");
    }
})
</script>

<style scoped></style>